<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="searchInpt"
        placeholder="输入ID/昵称/手机号"
        clearable
        @keyup.enter.native="search()"
        class="search-btn"
      >
        <el-button
          type="primary"
          @click="search()"
          icon="el-icon-search"
          slot="append"
          :loading="searchLoading"
        >搜索</el-button>
      </el-input>

      <div class="lz-tips">
        <label>兑换券:</label>
      </div>
      <el-select
        v-model="voucherValue"
        placeholder="全部兑换券"
        @focus="getFindExchangeCode"
        @change="getExchangeCodeDetail()"
      >
        <el-option
          v-for="item in voucherOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <div class="lz-tips">
        <label>兑换券状态:</label>
      </div>
      <el-select
        v-model="voucherStatusValue"
        placeholder="全部状态"
        @change="getExchangeCodeDetail()"
      >
        <el-option
          v-for="item in voucherStatusOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-table
        border
        :data="tableData"
        v-loading="tableLoading"
      >
        <el-table-column
          prop="userId"
          label="领取用户ID"
          width="100"
          align=center
        >
        </el-table-column>
        <el-table-column
          prop="nickName"
          label="领取用户昵称"
          align=center
        >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户手机号"
          align=center
        >
        </el-table-column>
        <el-table-column
          prop="exchangeCode"
          label="兑换码"
          align=center
        >
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="兑换商品"
          align=center
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          :formatter="formatterTime"
          label="截止有效期"
          width="104"
          align=center
        >
        </el-table-column>

        <el-table-column
          prop="codeEffectiveTime"
          :formatter="formatterTime"
          label="领取时间"
          width="104"
          align=center
        >
        </el-table-column>
        <el-table-column
          prop="codeStatus"
          label="领取状态"
          align=center
        >
        </el-table-column>
      </el-table>
      <div
        class="Pagination"
        style="text-align: left;margin-top: 10px;"
      >
        <el-pagination
          v-if="pageshow"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchExchangeCodeDetail, fetchFindExchangeCode } from "@/api/table";
import format from "date-format";
export default {
  data() {
    return {
      count: 0,
      limit: 20,
      currentPage: 1,
      searchLoading: false,
      tableLoading: false,
      searchInpt: "",
      tableData: [],
      voucherOption: [
        {
          value: "",
          label: "全部商品"
        }
      ],
      voucherValue: "",
      voucherStatusOption: [
        {
          value: "",
          label: "全部状态"
        },
        {
          value: "已使用",
          label: "已使用"
        },
        {
          value: "未使用",
          label: "未使用"
        }
      ],
      voucherStatusValue: "",
      pageshow: true
    };
  },
  mounted() {
    this.getExchangeCodeDetail();
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getExchangeCodeDetail();
    },
    //时间格式化
    formatterTime(row) {
      if (row.createTime !== undefined) {
        return format("yyyy-MM-dd hh:mm:ss", new Date(row.createTime));
      } else if (row.codeEffectiveTime !== undefined) {
        return format("yyyy-MM-dd hh:mm:ss", new Date(row.codeEffectiveTime));
      }
    },
    search() {
      this.currentPage = 1;
      this.pageshow = false;
      this.getExchangeCodeDetail();
      this.$nextTick(() => {
        this.pageshow = true;
      });
    },
    async getFindExchangeCode() {
      const voucher = await fetchFindExchangeCode({});
      this.voucherOption = [
        {
          value: "",
          label: "全部商品"
        }
      ];
      voucher.data.forEach(item => {
        const option = {};
        option.value = item.goodsId;
        option.label = item.goodsName;
        this.voucherOption.push(option);
      });
    },
    async getExchangeCodeDetail() {
      this.tableLoading = true;
      const codeDetail = await fetchExchangeCodeDetail({
        key: this.searchInpt,
        pageSize: this.limit,
        pageNo: this.currentPage,
        goodsId: this.voucherValue,
        codeStatus: this.voucherStatusValue
      });
      this.tableLoading = false;
      this.tableData = [];
      this.count = codeDetail.data.total;
      codeDetail.data.list.forEach(item => {
        const list = {};
        list.exchangeCode = item.exchangeCode;
        list.goodsName = item.goodsName;
        list.nickName = item.nickName;
        list.userName = item.userName;
        list.codeStatus = item.codeStatus;
        list.userId = item.userId;
        list.codeEffectiveTime = item.codeEffectiveTime;
        list.createTime = item.createTime;
        this.tableData.push(list);
      });
    }
  }
};
</script>
